<template>
<label>{{ $t(label) }}
  <div class="input-group">
    <input class="input-group-field" type="text" :value="value" readonly />
    <div class="input-group-button">
      <button id="btn" class="button"
              :title="$t(title)"
              @hidden="hiddenHandler"
              @click="clickHandler"
              v-tippy="{ interactive: true, hideOnClick: false }"
              v-clipboard="value">
        <et-icon :name="icon" />
      </button>
    </div>
  </div>
</label>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String
    },
    icon: {
      type: String,
      default: 'copy'
    }
  },

  data() {
    return {
      title: 'cmpt.title.copy'
    };
  },

  methods: {
    hiddenHandler() {
      this.title = 'cmpt.title.copy';
    },
    clickHandler() {
      this.title = 'cmpt.title.copied';
    }
  },

  i18n: {
    messages: {
      en: {
        cmpt: {
          title: {
            copy: "copy",
            copied: "copied"
          }
        }
      },
      cn: {
        cmpt: {
          title: {
            copy: "复制",
            copied: "已复制"
          }
        }
      }
    }
  }

};
</script>
